//配置路由相关信息
import Vue from 'vue'
import Router from 'vue-router'
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from "../components/User";
//路由懒加载
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')
const HomeNews = () => import('../components/HomeNews.vue')
const HomeMessage = () => import('../components/HomeMessage.vue')
const Profile = () => import('../components/Profile.vue')

//通过Vue.use(插件),安装插件
Vue.use(Router)

//创建路由对象并导出
const router = new Router({
  //配置路由和组件之间的映射关系
  routes: [
    {
      path: '',
      //重定向
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      meta: {
        title: '首页'
      },
      children: [
        // {
        //   path: '',
        //   redirect: 'news'
        // },
        {
          path: 'news',
          component: HomeNews
        },
        {
          path: 'message',
          component: HomeMessage
        },
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于'
      }
    },
    {
      path: '/user/:userId',
      component: User,
      meta: {
        title: '用户'
      }
    },
    {
      path: '/profile',
      component: Profile,
      meta: {
        title: '档案'
      }
    }
  ],
  mode: 'history'
})
//路由跳转之前回调，前置守卫
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title
  next()
  // console.log('------')
})
//路由跳转之后回调，后置钩子,不需要next
router.afterEach((to, from) => {
  // console.log('+++++')
})

export default router
